// 面板
.panel {
    box-shadow: 0 0 28rpx 0 rgba(204, 204, 204, 0.4);
    background-color: $theme-panel-bg-color;
    border-radius: 16rpx;
    overflow: hidden;
    margin: 24rpx 0;
    &_ov {
        overflow:visible;
    }
}

.container {
    padding-bottom: 108rpx;
}

%flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

%section {
    display: flex;
    justify-content: space-around;
    align-content: center;
    background: #fff;
    border-radius: 10rpx;
}

/** 用户信息 begin */
.user-section {
    height: 520rpx;
    padding: 100rpx 24rpx 0;
    position: relative;

    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 222rpx;
        filter: blur(1px);
        opacity: 0.7;
    }
}

.user-info-box {
    margin-left: 40rpx;
    height: 180rpx;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;

    .portrait {
        width: 104rpx;
        height: 104rpx;
        border-radius: 50%;
    }

    .username {
        font-size: 36rpx;
        font-weight: 600;
        margin-left: 24rpx;
    }
}

.vip-card-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    height: 240rpx;
    background: $theme-panel-bg-color;
    border-radius: 16rpx 16rpx 0 0;
    overflow: hidden;
    position: relative;
    padding: 28rpx 30rpx 0 40rpx;

    .card-bg {
        position: absolute;
        top: 20rpx;
        right: 98rpx;
        width: 188rpx;
        height: 160rpx;
    }

    .b-btn {
        width: 120rpx;
        height: 44rpx;
        font-size: 20rpx;
        border-radius: 22rpx;
        z-index: 1;
    }

    .tit {
        display: flex;
        align-items: center;

        .vip-name {
            font-size: 24rpx;
            margin-left: 12rpx;
        }
    }

    .e-b {
        font-size: $theme-size-small-base;
        color: #d8cba9;
        margin-top: 10rpx;
    }
}

/** 滑动容器 begin */
.cover-container {
    background-color: $theme-main-bg-color;
    margin-top: -120rpx;
    padding: 6rpx 24rpx 0;
    position: relative;
    padding-bottom: 20rpx;

    .arc {
        position: absolute;
        left: 0;
        top: -34rpx;
        width: 100%;
        height: 36rpx;
    }
}

/** 滑动容器 end */

/** 用户信息 end */

/** 统计相关 begin */
.statistics-section {
    @extend %section;
    padding: 24rpx 0;

    .statistics-item {
        @extend %flex-center;
        flex-direction: column;
        flex: 0 0 33.33%;
        max-width:33.33%;
        &_last {
            
        }
        &__number {
            font-size: 44rpx;
            font-weight: bold;
            &_last {
                max-width:100%;
                padding:0rpx 24rpx;
            }
        }

        &__name {
            margin-top: 8rpx;
            color: $theme-color-base;
            font-size: 28rpx;
        }
    }
}

/** 统计相关 end */

/** 订单相关 begin */
/*  */
.order-title {
    padding:28rpx 32rpx 32rpx;
}
.order-section {
    @extend %section;
    padding:0rpx 0rpx 48rpx;
    /* margin-top: 20rpx; */
    /*  */
    .order-item {
        @extend %flex-center;
        flex: 0 0 20%;
        font-size: 24rpx;
        color: $theme-color-base;

        &__name {
            margin-top: 16rpx;
            font-size: 24rpx;
        }
    }
}

/** 订单相关 end */

/** 历史记录和功能 begin */
.history-section {
    padding: 24rpx 24rpx 64rpx;
    margin-top: 20rpx;
    background: #fff;

    .sec-header {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: $theme-color-main-base;

        &__name {
            margin-left: 16rpx;
            font-size: 28rpx;
            color: $theme-color-main-base;
        }
    }

    .h-list {
        white-space: nowrap;
        margin-top: 40rpx;

        image {
            display: inline-block;
            width: 144rpx;
            height: 144rpx;
            margin-right: 20rpx;
            border-radius: 6rpx;
        }
    }
}

/** 历史记录和功能 end */

/* 客服弹出框 begin */

/* 商家二维码（临时用）begin */
.merchant-qr-wrap {
    width: 670rpx;
    padding: 56rpx;
    border-radius: 16rpx;
    background-color: $theme-bg-text-color;

    .shop-info {
        width: 100%;

        &__avatar {
            width: 104rpx;
            height: 104rpx;
        }

        &__name {
            margin-left: 30rpx;
            font-size: 36rpx;
            color: $theme-color-main-base;
            font-weight: 600;
        }
    }

    .merchant-qr {
        margin-top: 48rpx;
        width: 514rpx;
        height: 514rpx;
    }

    .merchant-qr-desc {
        margin-top: 44rpx;
        font-size: $theme-size-small-base;
        color: #898A8C;
    }
}

/* 商家二维码（临时用）end */











.modal {
    width: 590rpx;
    border-radius: 20rpx;
    overflow: hidden;
    background-color: #ffffff;
}

.modal .prompt {
    padding: 68rpx 48rpx 50rpx;
}

.modal .title {
    font-weight: 600;
    font-size: 32rpx;
    color: #333333;
}

.modal .content {
    margin-top: 32rpx;
    font-size: 28rpx;
    color: #666666;
}

.btn-group {
    width: 100%;
    border-top: 2rpx solid;
    height: 112rpx;
    font-size: 28rpx;
    font-weight: 600;
}

.btn-group .cancel {
    height: 100%;
    border-right: 2rpx solid #f1f9ff;
    color: #999999;
}

.btn-group .submit {
    height: 100%;
    font-size: 28rpx;
}

.btn-group button.submit {
    border: none;
}

.btn-group button.submit::after {
    border: none;
}

/* 弹出框 end */